<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.mainbox {
			background: #fff;
			min-height: 100%;
			padding: 0 20px;
		}
		.pagetitle {
			font-size: 20px;
			color: blue;
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
		}
		.baseinfo {
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
		}
		.title {
			font-size: 18px;
		}
		.item {
			margin-top: 10px;
			display: flex;
			align-items: center;
		}
		.itemname {
			min-width: 85px;
		}
		.input,.btn,.check {
			margin-left: 30px;
		}
		.input {
			display: flex;
			align-items: flex-end;
		}
		.circleinfo {
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
		}
		.chooseimg {
			margin-top: 12px;
		}
		.addbtns {
			margin-top: 20px;
		}
		.btns{
			margin-top: 20px;
		}
		.shape {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 10px;
		}
		.shapename {
			min-width: 40px;
		}
		.shape .el-input {
			width: 120px;
			margin-right: 10px;
		}
		.el-input-group__append {
			background: transparent;
			padding: 0 5px;
		}
		.el-select {
			width: 120px;
			margin-right: 10px;
		}
		.notice {
			margin: 10px 40px;
		}
		.scal {
			padding: 20px 10px;
		}
		.scalbox {
			background: #f3f3f3;
			margin-top: 12px;
			position: relative;
			overflow: hidden;
		}
		.tangle {
			position: absolute;
			background: #F56C6C;
		}
		.circle {
			position: absolute;
			background: #409EFF;
			border-radius: 50%;
		}

		.scal {
			padding: 20px 10px;
			position:relative;
		}
		.scalbox{
			margin: 20px 0 0 8px;
		}
		.scalX{
			height: 2px;
			width: 1020px;
			position: absolute;
			z-index: 9999;
			top: 56px;
			display: block;
			left: 10px;
			background: #409EFF;
		}
		.scalX .arrowRight{
			width: 0;
			height: 0;
			border: 8px solid;
			border-color: transparent transparent transparent #409EFF;
			position: absolute;
			top: -7px;
			right: -10px;
		}
		.scalY{
			height: 520px;
			width: 2px;
			position: absolute;
			z-index: 9999;
			top: 56px;
			display: block;
			left: 10px;
			background: #409EFF;
		}
		.scalY .arrowBottom{
			width: 0;
			height: 0;
			border: 8px solid;
			border-color: #409EFF transparent transparent transparent;
			position: absolute;
			bottom: -10px;
			left: -7px;
		}


	</style>
</block>
<block name="content">
	<div class="mainbox">
		<div class="pagetitle">广告位编辑</div>
		<div class="baseinfo">
			<div class="title">广告位基本信息</div>
			<div class="item">
				<div class="itemname">广告位名称</div>
				<div class="input"><el-input size="small" placeholder="请输入名称" v-model="param.ad_name"></el-input></div>
				<!--<div class="btn"><el-button size="small">插入图片</el-button></div>-->
			</div>
			<div class="item">
				<div class="itemname">是否属于高空</div>
				<div class="check"><el-radio v-model="param.is_upper_air" label="1">高空</el-radio></div>
				<div class="check"><el-radio v-model="param.is_upper_air" label="0">非高空</el-radio></div>
			</div>
			<div class="item">
				<div class="itemname">画板大小</div>
				<div class="input"><el-input size="small" placeholder="请输入尺寸" v-model="param.width"></el-input>cm（宽）</div>
				<div class="input"><el-input size="small" placeholder="请输入尺寸" v-model="param.height"></el-input>cm（高）</div>
			</div>
		</div>
		<div class="circleinfo">
			<div class="title">图形参数</div>
			<!--<div class="chooseimg"><el-button size="small">插入背景图片</el-button></div>-->
			<div class="addbtns">
				<el-button size="small" type="primary" @click="addRectangle()" >添加矩形</el-button>
				<el-button size="small" type="primary" @click="addCircular()">添加圆形</el-button>
				<span>（单位为cm，精确到0.1cm）</span>
			</div>
			<div class="shapeList">
				<div class="rectangleHtml shapeItem" v-for="(item,index) in param.rectangleArr" v-if="param.rectangleArr">
					<div class="shape">
						<div class="shapename">矩形</div>
						<el-input size="small" placeholder="输入名称" v-model="item.ads_name"></el-input>
						<el-input size="small" placeholder="输入X轴数据" v-model="item.x_axis" ref="value" @input="tangleInput(index,item.x_axis,'x_axis')"> <template slot="append">X</template></el-input>
						<el-input size="small" placeholder="输入Y轴数据" v-model="item.y_axis" ref="value" @input="tangleInput(index,item.y_axis,'y_axis')"> <template slot="append">Y</template></el-input>
						<el-input size="small" placeholder="输入宽度" v-model="item.width" ref="value" @input="tangleInput(index,item.width,'width')"> <template slot="append">W</template></el-input>
						<el-input size="small" placeholder="输入高度"  v-model="item.height" ref="value" @input="tangleInput(index,item.height,'height')"><template slot="append">H</template></el-input>
						<!--<div class="select">-->
							<!--<el-select size="small" v-model="item.metal" placeholder="材料选择">-->
								<!--<el-option label="材料一" value="one"></el-option>-->
								<!--<el-option label="材料二" value="two"></el-option>-->
								<!--<el-option label="材料三" value="three"></el-option>-->
							<!--</el-select>-->
						<!--</div>-->
						<!--<el-input size="small" placeholder="输入效果图关键字" v-model="item.key"></el-input>-->
						<i class="el-icon-error" style="color: red;font-size: 20px;" @click="delCurShape(0,index)"></i>
					</div>
					<div class="notice"><el-input placeholder="请填写相关备注" v-model="item.remark"></el-input></div>
				</div>
				<div class="circularHtml shapeItem" v-for="(item,index) in param.circleArr" v-if="param.circleArr">
					<div class="shape">
						<div class="shapename">圆形</div>
						<el-input size="small" placeholder="输入名称" v-model="item.ads_name"></el-input>
						<el-input size="small" placeholder="输入X轴数据" v-model="item.x_axis" ref="value" @input="circleInput(index,item.x_axis,'x_axis')"> <template slot="append">X</template></el-input>
						<el-input size="small" placeholder="输入Y轴数据" v-model="item.y_axis" ref="value" @input="circleInput(index,item.y_axis,'y_axis')"> <template slot="append">Y</template></el-input>
						<el-input size="small" placeholder="输入半径" v-model="item.radius" ref="value" @input="circleInput(index,item.radius,'radius')"> <template slot="append">R</template></el-input>
						<!--<div class="select">-->
							<!--<el-select size="small" v-model="item.metal" placeholder="材料选择">-->
								<!--<el-option label="材料一" value="one"></el-option>-->
								<!--<el-option label="材料二" value="two"></el-option>-->
								<!--<el-option label="材料三" value="three"></el-option>-->
							<!--</el-select>-->
						<!--</div>-->
						<!--<el-input size="small" placeholder="输入效果图关键字" v-model="item.key"></el-input>-->
						<i class="el-icon-error" style="color: red;font-size: 20px;" @click="delCurShape(1,index)"></i>
					</div>
					<div class="notice"><el-input placeholder="请填写相关备注" v-model="item.remark"></el-input></div>
				</div>
			</div>

		</div>
		<div class="btns">
			<el-button type="primary" size="small" @click="edit">保存</el-button>
			<el-button type="default" size="small" @click="back">取消</el-button>
		</div>
		<div class="scal">
			<div class="title">广告位预览</div>
			<div class="scalbox" :style="{'width': param.width + 'px','height': param.height + 'px'}">
				<div v-for="(item,index) in param.rectangleArr" v-if="param.rectangleArr">
					<div class="tangle" :style="{'width':item.width+'px','height':item.height + 'px','left':item.x_axis+'px','top':item.y_axis +'px'}"></div>
				</div>
				<div v-for="(item,index) in param.circleArr" v-if="param.circleArr">
					<div class="circle" :style="{'width':item.radius+'px','height':item.radius + 'px','left':item.x_axis+'px','top':item.y_axis +'px'}"></div>
				</div>
			</div>
			<div class="scalX" :style="{'width' : param.width + 'px'}"><div class="arrowRight" ></div></div>
			<div class="scalY" :style="{'height': param.height + 'px'}"><div class="arrowBottom" ></div></div>
		</div>

	</div>

</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    MAX_SCAN_WIDTH:1200, // 画板最大宽度
                    adname: "",                 // 广告位名称
                    highland: false,         // 是否高空
                    metal1: "",                  // 材料选择
                    metal2: "",                 // 材料选择
                    tanglex: "",                // 矩形X
                    tangley: "",                // 矩形Y
                    tanglew: "",               // 矩形宽
                    tangleh: "",               // 矩形高
                    circlex: "",                 // 圆形X
                    circley: "",                 // 圆形Y
                    circler: "",                 // 圆形半径

					//
					param: {
                        type: 'edit',		//获取param信息后要重新设置
                        id: "{$id}",
                        width: '1000',		//画板宽
						height: '500',		//画板搞
                        is_upper_air:'0',
                        rectangleArr: [{index:0,x_axis:0,y_axis:0,width:0,height:0, type:'1', ads_name:'',key:'',metal:'',remark:''}],// 矩形数组
                        circleArr:[{index:0,x_axis:0,y_axis:0,radius:0,type:'2',ads_name:'',key:'',metal:'',remark:''}],  // 圆形数组
					}
                }
            },
            watch: {
                // 监听画布宽度
                param: function() {
                    if(this.param.width > this.MAX_SCAN_WIDTH){
                        this.param.width = this.MAX_SCAN_WIDTH;
                        this.$message('画板宽度超出最大范围');
                    }
                }
            },
            mounted: function() {
            },
			created: function () {
				this.getAdsInfo();
            },
            methods: {
                getAdsInfo(){
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Ads/getInfoById', _this.param, function (data) {
                        if(data.status){
                            _this.param = data.data;
                            _this.param.type = 'edit';
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
				},
                edit: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Ads/update', _this.param, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            setTimeout(function () {
                                history.go(-1);
                            }, 1000);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
				back: function () {
					history.go(-1);
                },

                // 添加矩形
                addRectangle(){
                    var len = this.param.rectangleArr.length;
                    this.param.rectangleArr.push({
                        index:len>0?(this.param.rectangleArr[len-1].index+1):0,
                        x_axis:0,y_axis:0,width:0,height:0,type:'1',ads_name:'',key:'',metal:'',remark:''
                    });
                    console.log( this.param.rectangleArr.length);
                    console.log( this.param.circleArr.length);
                },
                // 添加圆形
                addCircular(){
                    var len = this.param.circleArr.length;
                    this.param.circleArr.push({
                        index:len>0?(this.param.circleArr[len-1].index+1):0,
                        x_axis:0,y_axis:0,width:0,height:0,type:'2',ads_name:'',key:'',metal:'',remark:''
                    });
                },
                // 删除图形
                delCurShape(type,index){
                    var currArr = [];
                    if(type == 0){
                        currArr = this.param.rectangleArr;
                    }else{
                        currArr = this.param.circleArr;
                    }
                    if(currArr.length ==  1){
                        currArr = [];
                    }else{
                        for(var i=0;i<currArr.length;i++){
                            if(currArr[i].index == index){
                                currArr.splice(index,1);
                            }
                        }
                    }

                    if(type == 0){
                        this.param.rectangleArr = currArr;
                    }else{
                        this.param.circleArr = currArr;
                    }
                },
                // 监听矩形输入事件
                tangleInput(index,val,type){
                    console.log(index);
                    var item = this.param.rectangleArr[index];
                    if(type == 'x_axis'){
                        item.x_axis = val;
                    }else if(type == 'y_axis'){
                        item.y_axis = val;
                    }else if(type == 'width'){
                        item.width = val;
                    }else{
                        item.height = val;
                    }
                    console.log(JSON.stringify(this.param.rectangleArr[index]));
                },
                // 监听圆形输入事件
                circleInput(index,val,type){
                    console.log(index);
                    var item = this.param.circleArr[index];
                    if(type == 'x_axis'){
                        item.x_axis = val;
                    }else if(type == 'y_axis'){
                        item.y_axis = val;
                    }else{
                        item.radius = val;
                    }
                    console.log(JSON.stringify(this.param.circleArr[index]));
                }

            }
        });
	</script>
</block>
